<template>
  <div class="container">
    <div>
      <el-card class="invoice-instructions mb-2">
        <div class="title">
          <h3>
            <i class="el-icon-info"></i>
            {{ $language.local("Notice") }}:
          </h3>
        </div>
        <ol class="info-body">
          <li>个人需完成实名认证；</li>
          <li>个人年龄≥18周岁，且≤65周岁；</li>
          <li>姓名、证件号码、银行账号必须一致；</li>
          <li>为保证及时到账，银行建议：中、农、工、建，商业银行、城市银行；</li>
          <li>银行卡必须为储蓄卡，不支持信用卡；</li>
          <li>上传的表格条数不超过300条；</li>
        </ol>
      </el-card>
    </div>

    <el-form
      :disabled="isCheck"
      :model="formData"
      class="pr-2 grid-flex"
      label-width="6rem"
      ref="taskInfoRef"
      status-icon
    >
      <el-form-item
        :error="uploadFileError"
        :label="$language.local('staffList')"
        :rules="TskEmpFileRule"
        class="upload-file"
        prop="staffList"
      >
        <div class="row">
          <upload-file
            :name="formData.staffList"
            :on-success="onSuccess"
            :showFileList="true"
            v-model="formData.staffList"
          ></upload-file>
          <a
            class="ml-3"
            href="http://demo.xinyueai.com/admin/static/template/tasktemplate.xlsx"
            target="_blank"
          >
            <span class="el-icon-download"></span>
            下载模板
          </a>
        </div>
      </el-form-item>
    </el-form>
    <div class="mb-2">
      <xy-table
        :list="employees"
        v-if="employees.length > 0"
      >
        <template #addItem>
          <span hidden></span>
        </template>
        <template #operation>
          <span hidden></span>
        </template>
        <template #pagination>
          <span hidden></span>
        </template>
      </xy-table>
    </div>

    <div class="form-footer">
      <el-button
        @click="reload()"
        size="mini"
      >
        {{
        $language.local("返回")
        }}
      </el-button>
      <template v-if="api.action == 'Check'">
        <el-button
          @click="showReasonDialog"
          class
          size="mini"
          type="danger"
        >{{ $language.local("不通过") }}</el-button>
        <el-button
          @click="onCheck(1)"
          size="mini"
          type="success"
        >
          {{
          $language.local("通过")
          }}
        </el-button>

        <!-- #region 审核原因 -->
        <el-dialog
          :title="$language.local('Reason')"
          :visible.sync="inputReasonVisible"
        >
          <el-form
            :model="formData"
            :rules="$rules"
            ref="ReasonRef"
            status-icon
          >
            <el-form-item prop="Reason">
              <xy-input
                clearable
                v-model="formData.Reason"
              ></xy-input>
            </el-form-item>
          </el-form>
          <div
            class="dialog-footer"
            slot="footer"
          >
            <el-button
              @click="onCheck(2)"
              size="mini"
              type="primary"
            >确 定</el-button>
          </div>
        </el-dialog>
        <!-- #endregion -->
      </template>
      <el-button
        :disabled="!!uploadFileError"
        @click="onSubmit('taskInfoRef')"
        size="mini"
        type="primary"
        v-else
      >{{ $language.local("确定") }}</el-button>
    </div>
  </div>
</template>

<script>
import API from "../../plugins/api";
export default {
  inject: ["reload"],
  props: ["spid"],
  data() {

    const validateTskEmpFile = (rule, value, callback) => {
      if (this.uploadFileError === "") {
        callback();
      } else {
        callback(new Error(this.uploadFileError));
      }
    };
    return {
      user: this.$store.getters.user,
      api: new API("/api/ServiceProject/Create"),
      merchant: null,
      formData: {
        staffList: "",
        spid: this.spid,
        TskEmpFile: "",
        attFileName: null,
        attFilePath: null,
        Reason: "",
      },
      attFileList: null,
      isCheck: false,
      inputReasonVisible: false,

      TskEmpFileRule: [
        { required: true, message: "不能为空", trigger: "blur" },
        { validator: validateTskEmpFile, trigger: "blur" },
      ],
      uploadFileError: "",
      employees: [],

    };
  },

  created() {

  },
  methods: {

    async onSuccess(e) {
      console.log(e);
      this.formData.attFileName = e.docname;
      let query = {
        ExcelUrl: e.docurl,
        spid: this.spid,
      };
      try {
        let response = await this.$http.post(
          "/api/ServiceProject/CheckEmpData",
          null,
          query
        );
        if (response.data.Code !== 200) {
          throw response;
        }
        console.log(response);
        this.employees = response.data.Data;

      } catch (error) {
        this.uploadFileError = error.data.Message;
        throw error;
      }
    },
    showReasonDialog() {
      this.inputReasonVisible = true;
    },
    async onCheck(check) {
      if (check == 2) {
        await this.$refs["ReasonRef"].validate();
      }
      let response = await this.$http.post(
        `/api/ServiceProject/Check/${this.formData.ID}?checkstatus=${check}&Reason=${this.formData.Reason}`
      );
      console.log(response);
      this.$message.success("审核成功");
      this.$router.go(-1);
    },
    async onSubmit(formName) {
      console.log(this.formData);
      await this.$refs[formName].validate();
      let query = {
        ExcelUrl: this.formData.staffList,
        spid: this.formData.spid
      };
      try {
        let response = await this.$http.post(
          "/api/ServiceProject/batchInputEmpData",
          null,
          query
        );
        console.log(response);
        this.reload();
      } catch (error) {
        console.error(error);
      }
    },

  },
};
</script>

<style lang="less" scoped>
.el-select {
  width: 100%;
}
.row {
  align-items: flex-start;
  width: 100%;
}
.select-servicecontent {
  color: gray;
}
.invoice-instructions {
  margin: 0;
  padding: 0 2rem;
  .info-body {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 50%;
      font-size: 12px;
      // width: 50%;
      margin-bottom: 1ex;
    }
  }
}
</style>
